<template>
    <div class="layout">
        <Layout
            style="background: linear-gradient(130deg, rgb(92,199,213), rgb(84, 51, 255) 41.07%, rgb(255, 0, 153) 76.05%);">
            <Header :style="{position: 'fixed', width: '100%',background: '#e0000000'}">
                <Menu mode="horizontal" theme="dark" active-name="1" :style="{background:'#e0000000'}">
                    <div class="layout-nav">
                        <MenuItem :name="index" v-for="(item,index) in menu">
                            <router-link style="color: rgb(255, 230, 80)" :to="item.path">
                                <Icon :type="item.icon"></Icon>
                                {{ item.name }}
                            </router-link>
                        </MenuItem>
                    </div>
                    <div class="layout-logo">
                        <span id="typed"></span>
                    </div>
                </Menu>
            </Header>
            <Content :style="{margin: '88px 20px 0', background: '#fff',  minHeight: '550px'}">
                <router-view @abc="getSaying"/>
            </Content>
            <Footer class="layout-footer-center">2011-2016 &copy; Vayne 's Resume</Footer>
        </Layout>
    </div>
</template>
<script>
import Typed from "typed.js";
import {toRaw} from "@vue/reactivity";

export default {
    name: "Title",
    data() {
        return {
            saying: "",
            menu: [
                {name: "About", path: "/about", icon: "ios-navigate"},
                {name: "Work", path: "/work", icon: "ios-keypad"},
                {name: "Skill", path: "/skill", icon: "ios-analytics"},
                {name: "Luck", path: "/luck", icon: "ios-paper"},
            ],
            dazi: null,
        }
    },
    methods: {
        getSaying(name) {
            this.saying = name;
            //toRow 把proxy代理对象获取到原对象
            let a = toRaw(this.dazi);
            if (a) {
                a.strings = [this.saying]
                a.reset();
            }
        }
    },
    mounted() {
        //打字机效果
        this.dazi = new Typed("#typed", {
            strings: [this.saying],
            typeSpeed: 90,
            lifeLike: false,
            loop: true,
        });
    },
};
</script>
<style>
.layout-logo {
    border-radius: 3px;
    position: relative;
    z-index: 3;
}

.layout {
    border: 1px solid #d7dde4;
    /*background: #e0000000;*/
    /*background: */
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.layout-nav {
    background: #e0000000;
    position: absolute;
    padding-top: 30px;
    padding-left: 60px;
    z-index: 5;
    width: 420px;
    right: 0%;
}

.layout-footer-center {
    text-align: center;
}

.dev-run-preview .dev-run-preview-edit {
    display: none
}

#typed {
    font-family: "Montserrat", sans-serif;
    font-size: 1.25rem;
    /*line-height: 1.5rem;*/
    color: white;
}
</style>


